<template>
    <div style="background: #F9F9F9 !important;">
        <div style="position: fixed;width: 100%;background: #fff;z-index: 99;">
            <bar text="资本管理"></bar>
        </div>
        <div style="padding-top: 60px;background: #fff;position: relative;box-shadow:0px 1px 26px 0px rgba(191,191,191,0.5);">
            <div @click="change" class="dataChange">
                <p style="font-size: 14px;color:#333333;">{{thisDate}}</p>
                <img src="../map/images/map21.png" style="width: 8px;height: 4px;margin-left: 4px;" alt="">
            </div>
            <p class="changeLine"></p>
            <div style="width: 100%;height: 40px;"></div>
<!--            收入支出-->
            <diV class="adminTop">
                <div class="adminTop-txt" @click="changeType">
                    <p :class="type == 0 ? 'adminTop-num':'adminTop-num2'">{{detailList.income}}<span>万</span></p>
                    <p :class="type == 0 ? 'adminTop-title':'adminTop-title2'">收入</p>
                    <p v-if="type == 0" class="adminTop-line2"></p>
                </div>
                <div style="flex: 1;text-align: center">
                    <p class="adminTop-line"></p>
                </div>
                <div class="adminTop-txt" @click="changeType">
                    <p :class="type == 1 ? 'adminTop-num':'adminTop-num2'">{{detailList.payed}}<span>万</span></p>
                    <p :class="type == 1 ? 'adminTop-title':'adminTop-title2'">支出</p>
                    <p v-if="type == 1" class="adminTop-line2"></p>
                </div>
            </diV>

<!--            选择年月-->
            <div id="changeM" class="changeM">
                <div style="position: relative">
                    <div class="changeBox">
                        <p @click="changeBtns1" :class="changeIdx == 0?'changeBtn2':'changeBtn'">按月</p>
                        <p @click="changeBtns2" :class="changeIdx == 1?'changeBtn2':'changeBtn'">按年</p>
                    </div>
                    <van-datetime-picker
                            v-if="changeIdx == 0"
                            v-model="currentDate"
                            title="选择时间"
                            type="year-month"
                            :min-date="minDate"
                            :max-date="maxDate"
                            :formatter="formatter"
                            @confirm="confirm"
                            @cancel="onCancel"
                    />
                    <van-picker
                            v-if="changeIdx == 1"
                            show-toolbar
                            title="选择时间"
                            :columns="columns"
                            @cancel="onCancel"
                            @confirm="onConfirm"
                            :default-index="2"
                    />
                </div>
            </div>
        </div>
<!--        每日支出-->
        <div class="classification" style="overflow:hidden;">
            <p v-if="type == 0" style="margin-left: 12px;color: #333333;font-size: 14px;padding-top: 24px;">收入分类</p>
            <p v-if="type == 1" style="margin-left: 12px;color: #333333;font-size: 14px;padding-top: 24px;">支出分类</p>
            <div id="myChart2" :style="{width: '100%', height: '300px',margin:'-30px auto 0 auto'}"></div>
        </div>

        <!--收入分类-->
        <div class="classification" style="margin-bottom: 40px;">
            <p v-if="type == 0" style="margin-left: 12px;color: #333333;font-size: 14px;padding-top: 24px;">收入分类</p>
            <p v-if="type == 1" style="margin-left: 12px;color: #333333;font-size: 14px;padding-top: 24px;">支出分类</p>
            <div id="myCharts" :style="{width: '300px', height: '300px',margin:'-40px auto 0 auto'}"></div>
        </div>
        <div style="width: 100%;height: 40px;"></div>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    import titles from "../../components/titleBar";
    import bar from "../../components/topBar2";
    export default {
        name: "Administration",
        data(){
            return{
                type:0,
                // 选择年月
                minDate: new Date(2018, 0, 1),
                maxDate: new Date(2020, 4, 1),
                currentDate: new Date(),
                thisDate:'',
                columns: ['2018', '2019', '2020'],
                changeIdx:0,
                detailList:[],
                num:4,
                thisDate2:''
            }
        },
        components: {
            titles,
            bar,
        },
        methods:{
            // 收入支出
            changeType(){
                if(this.thisDate2 == ''){
                    if(this.changeIdx == 0){
                        this.$options.methods.drawLine.bind(this)('2020-04');
                    }else{
                        this.$options.methods.drawLine.bind(this)('2020');
                    }

                }else{
                    this.$options.methods.drawLine.bind(this)(this.thisDate2);
                }

                if(this.type == 0){
                    this.type =1
                }else {
                    this.type = 0
                }
            },
            // 选择年月
            formatter(type, val) {
                // console.log(type,val)
                if (type === 'year') {
                    return `${val}年`;
                } else if (type === 'month') {
                    return `${val}月`;
                }
                // console.log(val)
                return val;
            },
            confirm(e){
                if((e.getMonth()+1) < 10){
                    var value = ((e.getFullYear())+'-0'+(e.getMonth()+1))
                    this.thisDate2 = value
                }else{
                    var value = ((e.getFullYear())+'-'+(e.getMonth()+1))
                    this.thisDate2 = value
                }
                this.$options.methods.drawLine.bind(this)(value);
                this.currentDate = e
                this.thisDate = e.getFullYear()+'年'+(e.getMonth() + 1)+'月'
                var x = document.getElementById("changeM")
                x.className = "hidden";
            },

            onConfirm(value, index) {
                this.thisDate = value
                this.thisDate2 = value
                this.$options.methods.drawLine.bind(this)(value);
                var x = document.getElementById("changeM")
                x.className = "hidden";
                // Toast(`当前值：${value}, 当前索引：${index}`);
            },
            onCancel() {
                // Toast('取消');
            },
            // 选择时间
            change(){
                var x = document.getElementById("changeM")
                x.className = "show";
            },
            // 取消
            onCancel(){
                var x = document.getElementById("changeM")
                x.className = "hidden";
            },
            changeBtns1(){
                this.changeIdx = 0
            },
            changeBtns2(){
                this.changeIdx = 1
            },
            // 饼状图
            drawLine(num) {
                var number = this.num % 3
                this.num = this.num + 1
                // 基于准备好的dom，初始化echarts实例
                this.$api.get('market/store/capital?time='+num, {}, response => {
                    var newArr = []
                    if (response.status >= 200 && response.status < 300) {
                        this.detailList = response.data.data

                        if(this.type == 0){
                            var name = '收入类型'
                            var color = ['#3A7FF6','#FF7676','#FFBF7C']
                            if(number == 0){
                                newArr=[{
                                    value:180,
                                    name:'销售扣点'
                                },{
                                    value:143,
                                    name:'广告'
                                },{
                                    value:98,
                                    name:'租金'
                                }]
                            }else if(number == 1){
                                newArr=[{
                                    value:70,
                                    name:'销售扣点'
                                },{
                                    value:123,
                                    name:'广告'
                                },{
                                    value:98,
                                    name:'租金'
                                }]
                            }else{
                                newArr=[{
                                    value:180,
                                    name:'销售扣点'
                                },{
                                    value:98,
                                    name:'广告'
                                },{
                                    value:123,
                                    name:'租金'
                                }]
                            }
                        }else{
                            var name = '支出类型'
                            var color = ['#3A7FF6','#FF7676','#FFBF7C','#44D7B6']
                            if(number == 0){
                                newArr=[{
                                    value:253,
                                    name:'水电气'
                                },{
                                    value:325,
                                    name:'设施维修'
                                },{
                                    value:124,
                                    name:'广告'
                                },{
                                    value:32,
                                        name:'人员'
                                }]
                            }else if(number == 1){
                                newArr=[{
                                    value:235,
                                    name:'水电气'
                                },{
                                    value:623,
                                    name:'设施维修'
                                },{
                                    value:125,
                                    name:'广告'
                                },{
                                    value:215,
                                    name:'人员'
                                }]
                            }else{
                                newArr=[{
                                    value:123,
                                    name:'水电气'
                                },{
                                    value:352,
                                    name:'设施维修'
                                },{
                                    value:426,
                                    name:'广告'
                                },{
                                    value:153,
                                    name:'人员'
                                }]
                            }
                        }
                        // console.log(newArr)
                        let myChart = this.$echarts.init(document.getElementById('myCharts'))
                        // 绘制图表
                        myChart.setOption({
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b}: {c} ({d}%)"
                            },
                            color: color,
                            series: [

                                {
                                    name: name,
                                    type: 'pie',
                                    radius: ['36%', '50%'],
                                    label: {
                                        normal: {}
                                    },
                                    data: newArr,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 8,
                                            shadowOffsetX: 2,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        });

                        var detailList = response.data.data.daily
                        var dateList1 = []
                        var dateList2 = []
                        for(var i =0 ;i < detailList.length;i++ ){
                            var value1 = detailList[i].in
                            var value2 = detailList[i].out
                            dateList1.push(value1)
                            dateList2.push(value2)
                        }
                        // 0收入 月份
                        if(this.changeIdx == 0){
                            var thatList = []
                            for (var i = 1;i<31;i++){
                              var value = (this.currentDate.getMonth()+1)+'-' + i
                              thatList.push(value)
                            }
                        }else{
                            var thatList = []
                            for (var i = 1;i<13;i++){
                                var value = this.thisDate+'年' + i + '月'
                                thatList.push(value)
                            }
                            // console.log('滴答滴答')
                            // console.log(thatList)
                        }
                        if(this.type == 0){
                            var thisList = dateList1
                        }else{
                            var thisList = dateList2
                        }
                        var data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68]];
                        var dateList = data.map(function (item) {
                            return item[0];
                        });
                        // var valueList = data.map(function (item) {
                        //     return item[1];
                        // });
                        let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
                        myChart2.setOption({
                            visualMap: [{
                                show: false,
                                type: 'continuous',
                                seriesIndex: 0,
                                min: 0,
                                max: 400
                            }],
                            title: [{
                                left: 'center',
                                // text: 'Gradient along the y axis'
                            }],
                            tooltip: {
                                trigger: 'axis'
                            },
                            xAxis: [{
                                type: 'category',
                                boundaryGap: false,
                                data: thatList,
                                axisLabel : {
                                    interval:4,
                                    show : true,
                                    textStyle : {
                                        color : '#979BA2'
                                    }
                                },
                                axisLine:{
                                    show:true,
                                    lineStyle:{
                                        color:'#979BA2'
                                    }
                                },
                            }],
                            yAxis: [{
                                splitLine: {show: false},
                                show: false,

                            }],
                            grid: [{
                                bottom: '30%',
                                left:'14px',
                                width:'350px',
                                borderColor:'red'
                            }],
                            series: [{
                                type: 'line',
                                showSymbol: false,
                                data: thisList,
                                areaStyle: {
                                    normal: {
                                        color: '#E6EEFF' //改变区域颜色
                                    }
                                },
                                itemStyle : {
                                    normal : {
                                        color:'#4287FE', //改变折线点的颜色
                                        lineStyle:{
                                            color:'#4287FE' //改变折线颜色
                                        }
                                    }
                                },
                            }]
                        });
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });



            },
            // 每日收入折线图
            drawLine2(){
                var detailList = this.detailList
                console.log(detailList)
                var dateList1 = []
                var dateList2 = []
                for(var i =0 ;i < detailList.length;i++ ){
                    var value1 = detailList[i].in
                    var value2 = detailList[i].out
                    dateList1.push(value1)
                    dateList2.push(value2)
                }
                var data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68]];
                var dateList = data.map(function (item) {
                    return item[0];
                });
                var valueList = data.map(function (item) {
                    return item[1];
                });
                let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
                myChart2.setOption({
                    visualMap: [{
                        show: false,
                        type: 'continuous',
                        seriesIndex: 0,
                        min: 0,
                        max: 400
                    }],
                    title: [{
                        left: 'center',
                        // text: 'Gradient along the y axis'
                    }],
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: dateList,
                        axisLabel : {
                            show : true,
                            textStyle : {
                                color : '#979BA2'
                            },

                        },
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:'#979BA2'
                            }
                        }
                    }],
                    yAxis: [{
                        splitLine: {show: false},
                        show: false
                    }],
                    grid: [{
                        bottom: '30%'
                    }],
                    series: [{
                        type: 'line',
                        showSymbol: false,
                        data: valueList,
                        areaStyle: {
                            normal: {
                                color: '#E6EEFF' //改变区域颜色
                            }
                        },
                        itemStyle : {
                            normal : {
                                color:'#4287FE', //改变折线点的颜色
                                lineStyle:{
                                    color:'#4287FE' //改变折线颜色
                                }
                            }
                        },
                    }]
                });
            }
        },
        mounted() {
            var thisDate = this.currentDate
            // console.log(thisDate.getFullYear()+'年'+(thisDate.getMonth() + 1)+'月')
            this.thisDate = thisDate.getFullYear()+'年'+(thisDate.getMonth() + 1)+'月'
            this.drawLine('2020-04')
            // this.drawLine2()
        }
    }
</script>

<style scoped lang="scss">
    body{
        background: #F9F9F9 !important;
        width: 100%;
        height: 100%;
    }
    .adminTop{
        margin-top: 18px;
        display: flex;
        .adminTop-txt:nth-child(1){
            margin-left: 48px;
        }
        .adminTop-txt:last-child{
            margin-right: 48px;
        }
        /*align-items: center;*/
        .adminTop-txt{

            width: 84px;
            margin-top: 10px;
            padding-bottom: 18px;
            position: relative;
            .adminTop-num{
                font-family: font2;
                text-align: center;
                font-size: 20px;
                color: #3379F4;
                span{
                    font-size: 12px;
                }
            }
            .adminTop-title{
                font-family: font2;
                font-size: 12px;
                color: #220000;
                text-align: center;
                margin-top: 10px;
            }
            .adminTop-num2{
                font-family: font2;
                text-align: center;
                font-size: 20px;
                color: #999999;
                span{
                    font-size: 12px;
                }
            }
            .adminTop-title2{
                font-size: 12px;
                color: #999999;
                text-align: center;
                margin-top: 10px;
                font-family: font2;
            }
            .adminTop-line2{
                width: 100%;
                height: 4px;
                border-radius: 2px;
                background: #3A7FF6;
                position: absolute;
                bottom: 0;

            }
        }
        .adminTop-line{
            width: 1px;
            height: 48px;
            background: #E6E6E6;
            margin: 0 auto;
        }
    }
    /deep/.van-datetime-picker>.van-picker__columns>.van-picker-column:nth-child(1){
        text-align: right;
        margin-right: 30px;
    }
    /deep/.van-datetime-picker>.van-picker__columns>.van-picker-column:nth-child(2){
        text-align: left;
        margin-left: 30px;
    }
    /deep/.van-picker>.van-picker__columns>.van-picker-column{
        text-align: center;
    }
    /deep/.van-picker__columns{
        margin-top: 40px;
    }
    /*月份*/
    #changeM{
        visibility: hidden;
        width: 100%;
        height: 200px;
        position: fixed;
        z-index: 100;
        bottom: 0;
        background: #fff;
        padding-bottom: 40px;
    }
    #changeM.show {
        visibility: visible;
        animation: fadein .6s;
    }
    @keyframes fadein {
        from {
            opacity: 0.8;
            bottom: -160px;
        }
        to {
            opacity: 1;
            bottom: 0px;
        }
    }
    .changeBtn{
        width: 78px;
        height: 28px;
        border: 1px solid #E6E6E6;
        text-align: center;
        line-height: 30px;
        background: #fff;
    }
    .changeBtn2{
        width: 80px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background: #3A7FF6;
        color: #fff;
    }

    /*收入分类*/
    .classification{
        width: 350px;
        height: 242px;
        background: #fff;
        border-radius: 1px;
        margin: 10px auto 0 auto;
    }
    .changeBox{
        width: 160px;height: 30px;display: flex;align-items: center;position: absolute;z-index: 101;top: 50px;left:108px;
    }
    .dataChange{
        width: 116px;height: 30px;background: #F3F3F3;border-radius: 1px solid #E6E6E6;border-radius: 15px;margin: 0 auto;position: absolute;top: 70px;left: 130px;z-index: 10;display: flex;align-items: center;justify-content: center;
    }
    .changeLine{
        width: 338px;height: 1px;background: #E6E6E6;position: absolute;top: 84px;left: 20px;
    }
</style>
